import React, { useState } from 'react';
import { Layout } from 'antd';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import TodoList from './components/TodoList';

const { Header, Content } = Layout;

function Home() {
  return <h1>首页</h1>;
}

function App() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={{ background: '#fff', padding: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ marginLeft: '16px', fontSize: '18px', fontWeight: 'bold' }}>歌谣后台管理系统</span>
          <button style={{ marginRight: '16px', padding: '8px 16px', background: '#f5222d', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>退出</button>
        </Header>
        <Layout>
          <Sidebar collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} />
          <Content style={{ margin: '0 16px' }}>
            <Routes>
              <Route path="/home" element={<Home />} />
              <Route path="/todolist" element={<TodoList />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

export default App;